<template>
    <TopView :search="false" :image="state.document.topView.image" title="新闻中心" />
    <div class="w-full flex justify-center">
        <div class="2xl:w-3/5 xl:w-4/5 md:w-full h-full">
            <NewsCard
                v-for="document in news.document"
                :image="document.coverimg"
                :title="document.name"
                :date="document.date"
                :to="document.to"
            />
            <div class="text-center my-5" v-if="flag" @click="skip.num += 5">
                <span
                    class="inline bg-gray-200 text-gray-500 cursor-pointer text-xs py-1 px-4 rounded-3xl"
                >点击加载更多...</span>
            </div>
            <div class="text-center my-5" v-else>
                <span class="inline bg-gray-200 text-gray-500 text-xs py-1 px-4 rounded-3xl">已经到底了</span>
            </div>
        </div>
    </div>
    <MyFooter breadCurb="> 新闻中心" />
</template>

<script lang="ts" setup>
import TopView from "@comps/topView.vue";
import { state, news } from "@utils/store";
import NewsCard from "@comps/smallComs/newsCard.vue";
import { onMounted, reactive, watch, ref } from "vue";
import axios from "axios";
import { config } from "@/config";
import MyFooter from "@comps/footer.vue";
const skip = reactive({
    num: 0
})
const flag = ref(true)
watch(skip, async () => {
    const { data } = await axios.get(`${config.baseUrl}:${config.port}/news?condition=&limit=5&skip=${skip.num}`)
    if (data.length !== 0) {
        news.document.push(...data)
        if (news.document.length % 5 !== 0) {
            flag.value = false
        }
    } else {
        alert('数据加载完毕')
        flag.value = false
    }
})
onMounted(async () => {
    news.document = []
    const { data } = await axios.get(`${config.baseUrl}:${config.port}/news?condition=&limit=5&skip=0`)
    news.document.push(...data)
})
</script>